<template>
  <router-exact-view name="home">
    <div class="dashboard-container">
      <div class="say-hello">
        <div class="avatar-area">
          <img src="../../assets/login-logo.png" alt="我的头像">
        </div>
        <div class="hello-content">
          <div class="hello">静宁县特殊教育学校</div>
          <div class="title">{{ summary }}</div>
          <el-button
            style="float: right; padding: 3px 5px"
            type="text"
            @click="goToSummary"
          >查看全部</el-button>
        </div>
      </div>
      <div v-if="showImgEnter" class="dashboard-title">
        风采展示
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="goToInfo('fifth')"
        >点击查看</el-button>
      </div>
      <el-row :gutter="20">
        <el-col v-if="announceList && announceList.length > 0" :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>通知公告</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="goToInfo('first')"
              >查看全部</el-button>
            </div>
            <div v-for="item in announceList" :key="item.id" class="item">
              <a class="text" @click="goToAnnounceDetail(item.id)">
                {{ item.title }}
              </a>
              <div class="sub-time">
                {{ item.createdTime | format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="bussinessList && bussinessList.length > 0" :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>业务指导</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="goToInfo('forth')"
              >查看全部</el-button>
            </div>
            <div v-for="item in bussinessList" :key="item.id" class="item">
              <pdf-enter
                :src="item.url"
                :words="item.name"
                style-name="text"
              />
              <div class="sub-time">
                {{ item.createdTime | format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>管理机构</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="goToManageDetail()"
              >查看全部</el-button>
            </div>
            <div class="item">
              <a class="text" @click="goToManageDetail('first')">领导小组</a>
            </div>
            <div class="item">
              <a class="text" @click="goToManageDetail('second')">工作机制</a>
            </div>
            <div class="item">
              <a class="text" @click="goToManageDetail('third')">工作职责</a>
            </div>
            <div class="item">
              <a class="text" @click="goToManageDetail('forth')">专家团队</a>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="fileList && fileList.length > 0" :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>政策文件</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="goToInfo('second')"
              >查看全部</el-button>
            </div>
            <div v-for="item in fileList" :key="item.id" class="item">
              <pdf-enter
                :src="item.url"
                :words="item.name"
                style-name="text"
              />
              <div class="sub-time">
                {{ item.createdTime | format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col v-if="exampleList && exampleList.length > 0" :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>典型案例</span>
              <el-button
                style="float: right; padding: 3px 0"
                type="text"
                @click="goToInfo('third')"
              >查看全部</el-button>
            </div>
            <div v-for="item in exampleList" :key="item.id" class="item">
              <pdf-enter
                :src="item.url"
                :words="item.name"
                style-name="text"
              />
              <div class="sub-time">
                {{ item.createdTime | format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </router-exact-view>
</template>

<script>
import { getFileList, getAnnounceList, getImgList } from '@/api/operate'
import RouterExactView from '@/components/routerExactView'
import PdfEnter from '@/components/pdf-enter'
import { toHttps } from '@/utils'
export default {
  name: 'Home',
  components: { RouterExactView, PdfEnter },
  data() {
    return {
      showImgEnter: false, // 是否显示风采展示的入口
      fileList: [],
      bussinessList: [],
      exampleList: [],
      announceList: [],
      summary:
        '静宁县特殊教育学校是一所九年一贯制寄宿学校，也是全县唯一一所为残疾孩子实现上学梦而创办的学校。学校建于2000年7月，在历届县委、县政府的正确领导下，在上级主管部门和社会各界的大力支持下，历时20个春秋，两易校址，走过了一条由创建时的一穷二白到今天实现标准化办学的艰辛之路......'
    }
  },
  async mounted() {
    if (this.$route.name === 'home') {
      await this.getAnnounceList()
      await this.getFileList(1, 'fileList')
      await this.getFileList(2, 'exampleList')
      await this.getFileList(3, 'bussinessList')
      await this.getImg()
    }
  },
  methods: {
    goToSummary() {
      this.$router.push({
        path: `/home/summary`
      })
    },
    goToManageDetail(tab) {
      this.$router.push({
        path: `/home/manage${tab ? `/${tab}` : ''}`
      })
    },
    goToInfo(tab) {
      this.$router.push({
        path: `/home/info${tab ? `/${tab}` : ''}`
      })
    },
    goToAnnounceDetail(id) {
      this.$router.push({
        path: `/home/announcedetail/${id}`
      })
    },
    async getFileList(type, listName) {
      try {
        const res = await getFileList({
          pageNum: 1,
          pageSize: 5,
          type
        })
        if (res && res.list) {
          this[listName] = res.list.map(v => ({ ...v, url: toHttps(v.url) }))
        }
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    async getAnnounceList(type, listName) {
      try {
        const res = await getAnnounceList({
          pageNum: 1,
          pageSize: 5,
          status: 1
        })
        if (res && res.list) {
          this.announceList = res.list
        }
        this.loading = false
      } catch (err) {
        this.loading = false
      }
    },
    async getImg() {
      try {
        const res = await getImgList()
        if (res && res.length > 0) {
          this.showImgEnter = true
        }
      } catch (err) {
        this.loading = false
        console.log('接口出错')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .say-hello {
    background: #fff;
    padding: 15px;
    display: table;
    width: 100%;
    .avatar-area {
      display: table-cell;
      width: 72px;
      height: 72px;
      img {
        width: 72px;
        height: 72px;
        border-radius: 36px;
      }
    }
    .hello-content {
      display: table-cell;
      vertical-align: middle;
      padding-left: 20px;
      .hello {
        padding-bottom: 15px;
        font-size: 20px;
        font-weight: 500;
      }
      .title {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }
    .right {
      display: table-cell;
      vertical-align: middle;
      overflow: hidden;
      width: 400px;
      .calc-item {
        float: right;
        padding: 0 32px;
        text-align: right;
        position: relative;
        .calc-title {
          margin-bottom: 10px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }
        .calc-num {
          color: rgba(0, 0, 0, 0.85);
          font-size: 20px;
        }
        &:after {
          content: "";
          display: block;
          width: 1px;
          height: 40px;
          position: absolute;
          top: 8px;
          right: 0;
          background: #f0f0f0;
        }
        &:first-child {
          padding-right: 0;
          &:after {
            background: none;
          }
        }
      }
    }
  }
  .box-card {
    margin-top: 10px;
    .clearfix {
      .tab-btn {
        float: right;
        padding: 3px 0;
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
        &.active {
          color: #409eff;
        }
      }
    }
    .item {
      overflow: hidden;
      font-size: 14px;
      line-height: 30px;
      display: flex;
      justify-content: space-around;
      .text {
        flex: 1;
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &:hover {
          text-decoration: underline;
          color: #409eff;
        }
      }
      .sub-time {
        width: 140px;
        color: rgba(0, 0, 0, 0.45);
      }
    }
    & ::v-deep .el-card__body {
      height: 190px;
    }
  }
}
.dashboard-title {
  background: #fff;
  margin-top: 10px;
  padding: 20px;
  font-size: 20px;
  font-weight: 600;
  a {

  }
}
</style>
